<template>
  <div class="white-module module">
    <div class="title"><span></span>代表队信息</div>
    <div class="c">

      <div class="images">
        <div class="item">
          <div class="image">
            <img
              :src="ruleForm.info.creator ? ruleForm.info.creator.header : ''" style="width: 100px; height: 140px;"
            />
            <!--
            <div class="z">
              <div class="privary">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="zhe"
                  :preview-src-list="[ruleForm.info.creator ? ruleForm.info.creator.header : '']"
                  fit="cover"
                />
              </div>
              <img src="@/assets/common/check.png" />
              <img src="@/assets/common/del.png" />
            </div>
            -->
          </div>
        </div>
      </div>
      <div class="info">
        <div class="item"><span>代表队名称</span>{{ ruleForm.info.team ? ruleForm.info.team.teamName : '' }}</div>
        <div class="item"><span>代表队编号</span>{{ ruleForm.info.team ? ruleForm.info.team.jiancheng : '' }}-{{ ruleForm.info.team ? ruleForm.info.team.teamCode : '' }}</div>
        <div class="item"><span>单位名称</span>{{ ruleForm.info.team ? ruleForm.info.team.company : '' }}</div>
        <div class="item"><span>所属地区</span>{{ ruleForm.info.team ? ruleForm.info.team.provinceName : '' }} {{ ruleForm.info.team ? ruleForm.info.team.cityName : '' }}</div>
        <div class="item"><span>负责人姓名</span>{{ ruleForm.info.creator ? ruleForm.info.creator.realName : '' }}</div>
        <div class="item"><span>性别</span>{{ ruleForm.info.creator ? (ruleForm.info.creator.sex == 1 ? '男' : '女') : '' }}</div>
        <div class="item"><span>证件类型</span>{{ ruleForm.info.creator ? baseService.certificateType(ruleForm.info.creator.idType) : '' }}</div>
        <div class="item"><span>证件号码</span>{{ ruleForm.info.creator ? baseService.hideIdCard(ruleForm.info.creator.idCard): '' }}</div>
        <div class="item"><span>联系方式(手机)</span>{{ ruleForm.info.creator ? ruleForm.info.creator.phone : '' }}</div>
        <div class="item"><span>电子邮箱</span>{{ ruleForm.info.creator ? ruleForm.info.creator.email : '' }}</div>
        <div class="item"><span>负责人授权书</span>
          <a :href="ruleForm.info.creator?ruleForm.info.creator.empower:''" target="_blank">点击查看</a>
          <!--
         <el-button @click="showPic(ruleForm.info.creator.empower, ruleForm.info.creator.id, 0)" class="btnImg" type="text">
          点击查看
        </el-button>
        -->
        </div>
      </div>
    </div>
  </div>

  <!--主领队信息-->
  <div class="white-module module" >
    <div class="title"><span></span>领队-1
      <el-button type="primary" style="margin-left:20px;" >主领队</el-button>
    </div>
    <div class="c">
      <div class="images">
        <div class="item">
          <div class="image">
            <img style="width: 100px; height: 140px;" :src="ruleForm.info.leader && ruleForm.info.leader.header ? ruleForm.info.leader.header : ''"/>
            <!--
            <div class="z">
              <img src="@/assets/common/check.png" />
              <img src="@/assets/common/del.png" />
            </div>
            -->
          </div>
        </div>

        <!-- <div class="item">
          <div class="text">领队授权书</div>
          <div class="image">
            <img :src="ruleForm.info.leader && ruleForm.info.leader.empower2 ? ruleForm.info.leader.empower2 : ''"/>
            <div class="z">
              <img src="@/assets/common/check.png" />
              <img src="@/assets/common/del.png" />
            </div>
          </div>
        </div> -->
      </div>
      <div class="info">
        <div class="item"><span>账号</span>{{ ruleForm.info.leader ? ruleForm.info.leader.phone : '' }}</div>
        <div class="item"><span>姓名</span>{{ ruleForm.info.leader ? ruleForm.info.leader.realName : '' }}</div>
        <div class="item"><span>性别</span>{{ ruleForm.info.leader ? (ruleForm.info.leader.sex == 1 ? '男' : '女') : '' }}</div>
        <div class="item"><span>证件类型</span>{{ ruleForm.info.leader ? baseService.certificateType(ruleForm.info.leader.idType) : '' }}</div>
        <div class="item"><span>证件号码</span>{{ ruleForm.info.leader ? baseService.hideIdCard(ruleForm.info.leader.idCard) : '' }}</div>
        <div class="item"><span>联系方式(手机)</span>{{ ruleForm.info.leader ? ruleForm.info.leader.phone : '' }}</div>
        <div class="item"><span>电子邮箱</span>{{ ruleForm.info.leader ? ruleForm.info.leader.email : '' }}</div>
        <div class="item"><span>领队授权书</span>
          <a :href="ruleForm.info.leader?ruleForm.info.leader.empower:''" target="_blank">点击查看</a>
          <!--
          <el-button @click="showPic(ruleForm.info.leader.empower, ruleForm.info.leader.id, 0)" class="btnImg" type="text">
          点击查看
          </el-button>
          -->
        </div>
      </div>
    </div>
  </div>


  <div class="white-module module" v-for="(item, index) in ruleForm.info.fuLeaderList">
    <div class="title"><span></span>领队-{{ index + 2 }}
      <el-button type="primary" style="margin-left:20px; " @click="setLeader(ruleForm.info.team.id, item.teamUserId)">设置成主领队</el-button>
      <el-button type="danger" style="margin-left:20px; " v-if="item.phone != ruleForm.info.creator.phone" @click="delFuLeader(item.teamUserId)">删除领队</el-button>
    </div>
    <div class="c">
      <div class="images">
        <div class="item">
          <!-- <div class="text">一寸证件照</div> -->
          <div class="image">
            <img style="width: 100px; height: 140px;" :src="item.header ? item.header : ''"/>
            <!--
            <div class="z">
              <img src="@/assets/common/check.png" />
              <img src="@/assets/common/del.png" />
            </div>
            -->
          </div>
        </div>
        <!-- <div class="item">
          <div class="text">领队授权书</div>
          <div class="image" v-if="item.header">
            <img :src="item.header ? item.header : ''"/>
            <div class="z">
              <img src="@/assets/common/check.png" />
              <img src="@/assets/common/del.png" />
            </div>
          </div>
        </div> -->
      </div>
      <div class="info">
        <div class="item"><span>账号</span>{{ item.account }}</div>
        <div class="item"><span>姓名</span>{{ item.realName }}</div>
        <div class="item"><span>性别</span>{{ item.sex == 1 ? '男' : '女' }}</div>
        <div class="item"><span>证件类型</span>{{ baseService.certificateType(item.idType)}}</div>
        <div class="item"><span>证件号码</span>{{ baseService.hideIdCard(item.idCard) }}</div>
        <div class="item"><span>联系方式(手机)</span>{{ item.phone }}</div>
        <div class="item"><span>电子邮箱</span>{{ item.email }}</div>
        <div class="item"><span>领队授权书</span>
          <a :href="item.empower?item.empower:''" target="_blank">点击查看</a>
          <!--
          <el-button @click="showPic(item.empower,item.id,0)" class="btnImg" type="text">
          点击查看
        </el-button>
        -->
        </div>
      </div>

    </div>
  </div>
  <el-dialog
  title="授权书"
  v-model="dialogVisible"
  width="1000px"
>
 <div class="preview">
  <div class="img">

    <el-upload  :disabled="uploadIndex==0 ? false: true"
        class="avatar-uploader" style="text-align: center"
        :action="baseUrl+'/front/upload'"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
    >
      <div class="image">
        <img v-if="review.url" :src="review.url" class="img" />
        <div v-else class="upload">
          <img src="@/assets/common/upload.png">
        </div>
      </div>
    </el-upload>
  </div>
  <p v-if="uploadIndex==0">点击可修改</p>
  <p> <a :href="review.url" target="_blank">预览</a></p>
 </div>
</el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import baseService from "@/service/baseService";
import { setCache } from "@/utils/cache";
import {ElMessage, ElMessageBox, UploadProps} from "element-plus";
import router from "@/router";
import app from "@/constants/app";
const zhe = require("@/assets/zhezhao.png")
const dialogVisible = ref(false);
const ruleForm = reactive({
  info: {}
});
const review = ref({
  id: '',
  url: '',
});
const baseUrl = app.api;
const uploadIndex = ref(-1);
/**
 * 删除副领队
 */
const delFuLeader = (id: any) => {
  ElMessageBox.confirm("确定删除副领队, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      baseService
        .post("/front/spteamuser/delete", { id: id })
        .then((res) => {
          if (res.code === 0) {
            getTeamInfo();
            ElMessage.success('删除成功');
          } else {
            ElMessage.error(res.msg);
          }
        }
        );
    })
    .catch(() => { });
};



/**
 * 设置成主领队
 */
const setLeader = (teamId: any, id: any) => {
  ElMessageBox.confirm("只能有一个主领队, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      baseService
        .post("/front/spteamuser/setLeader", { teamId: teamId, id: id })
        .then((res) => {
          if (res.code === 0) {
            getTeamInfo();
            ElMessage.success('设置成功');
          } else {
            ElMessage.error(res.msg);
          }
        }
        );
    })
    .catch(() => { });
};

/**
 * 查询代表队信息
 */
const getTeamInfo = () => {
  baseService
    .get("/front/spteam/1", {})
    .then((res) => {
      if (res.code === 0) {
        let info = res.data;
        if (info) {
          ruleForm.info = info;
          setCache("userInfo", info, true);
        } else {
          //创建领队
          router.push("/account/team");
        }
      }
    }
    );
};

const showPic = (url: any, id: any, index: any) => {
  dialogVisible.value = true;
  review.value.url = url;
  review.value.id = id;
  uploadIndex.value = index;
}


/**
 * 修改授权书
 */
const updateEmpower = (id: any, url: any) => {
  baseService
      .post("/front/spuser/updateEmpower", {
        id:  id,
        empower: url
      })
      .then((res) => {
            if (res.code === 0) {
              //刷新当前页面
              getTeamInfo();
            }
          }
      );
};


const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
  review.value.url = URL.createObjectURL(uploadFile.raw!)
  updateEmpower(review.value.id, response.data.src);
  if(response.data.showSrc){
    review.value.url = response.data.showSrc;
  }
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (!(rawFile.type == 'image/jpeg'||rawFile.type == 'image/png'||rawFile.type == 'image/jpg' || rawFile.type == 'application/pdf')) {
    ElMessage.error('仅支持JPG/JPEG/PNG/PDF格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('授权书不能超过5MB!')
    return false
  }
  return true
}

getTeamInfo();

</script>

<style lang="scss" scoped>
.preview {
  .img {
    position: relative;

    img {
      max-width: 100%;
      display: block;
      margin: auto;
    }

    input {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 1;
      opacity: 0;
    }
  }

  p {
    text-align: center;
    margin-top: 10px;
  }
}

.module {
  padding: 20px 0px;
  margin-bottom: 12px;
  position: relative;

  .title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: $font-weight-bold;
    padding: 0px 24px;

    span {
      width: 4px;
      height: 12px;
      background: #00a0e9;
      margin-right: 7px;
    }

    .left-btn {
      margin-left: 50px;
      margin-right: 10px;
    }
  }

  .c {
    display: flex;
    padding-top: 35px;

    .info {
      display: flex;
      flex-wrap: wrap;
      width: 700px;
      padding-top: 5px;
      margin-bottom: -14px;

      .item {
        display: flex;
        align-items: center;
        margin-bottom: 14px;
        width: 50%;
        font-family: PingFangSC-Regular, PingFang SC;

        span {
          width: 156px;
          text-align: right;
          font-weight: $font-weight-bold;
          margin-right: 20px;
          font-family: PingFangSC-Medium, PingFang SC;
        }

        .btnImg {
          position: relative;
          margin: 0px;
          height: 20px;

          .el-image {
            width: 100%;
            height: 100%;
            left: 0px;
            top: 0px;
            z-index: 20;
            position: absolute;
          }
        }
      }
    }

    .images {
      display: flex;

      .item {
        display: flex;
        margin-left: 38px;
        font-weight: $font-weight-bold;

        .image {
          background: rgba(222, 224, 227, 0.23);
          border-radius: 4px;
          padding: 8px 11px;
          position: relative;

          >img {
            height: 104px;
            display: block;
          }

          .z {
            position: absolute;
            left: 11px;
            top: 8px;

            width: calc(100% - 22px);
            height: calc(100% - 16px);
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 20;

            img {
              width: 14px;
              height: 14px;
              margin: 0px 6px;
              cursor: pointer;
            }

            .privary {
              position: absolute;
              width: 20px;
              height: 20px;
              top: 43px;
              left: 28px;
              overflow: hidden;
              z-index: 3;
            }

            .privary1 {
              left: 55px;
            }
          }

          &:hover {
            .z {
              display: flex;
            }
          }
        }
      }
    }
  }
}</style>
